<template>
	<view>
		<u-navbar title="绑定手机"></u-navbar>
		<view class="wrap" :style="`transform: translateX(${-750*step}rpx)`">
			<view class="page">
				<view class="step1">
					<view class="content">
						<view class="title">绑定新手机号</view>
						<view>
							<view class="u-flex">
								<view class="u-flex u-m-r-30 u-font-36" @tap="areaPicker.show=true">
									<text class="" style="font-size: 32rpx;">+</text><!-- ﹢ -->
									<text class="" style="padding-right:15rpx;">{{areaCode}}</text>
									<u-icon name="arrow-down" color="#666" size="26"></u-icon>
								</view>
								<input class="u-font-40" maxlength="20" type="number" v-model="phone" placeholder="请输入新手机号" @blur="checkPhone"/>
							</view>
							<view class="tips" :class="{error:phoneStatus.error}">{{phoneStatus.des}}</view>
						</view>
						<view>
							<view class="u-flex">
								<input class="u-font-40 u-flex-1" maxlength="11" type="text" v-model="captcha.code" placeholder="请输入图形码" @blur="checkCaptcha"/>
								<view @tap="getCaptcha" class="img-code u-m-l-20" :style="{backgroundImage: `url(data:image/png;base64,${captcha.base64})`}"></view>
							</view>
							<view class="tips" :class="{error:imgStatus.error}">{{imgStatus.des}}</view>
						</view>
						
						<button @tap="sendSms" class="getCaptcha" :class="{valid:sendable}">获取短信验证码</button>
					</view>
				</view>
			</view>
			<view class="page">
				<view class="step2">
					<view class="key-input">
						<view class="title">输入验证码</view>
						<view class="tips">验证码已发送至 {{phone}}</view>
						<u-message-input :value="verCode" @change="change" @finish="finish" mode="bottomLine" :maxlength="maxlength"></u-message-input>
						<text :class="{ error: verStatus.error }">{{verStatus.des}}</text>
						<view class="captcha">
							<text :class="{ noCaptcha: !verStatus.second }" @tap="resend">收不到验证码点这里</text>
							<text :class="{ regain: verStatus.second }">{{ verStatus.second }}秒后重新获取验证码</text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<u-select v-model="areaPicker.show" mode="single-column" :list="areaPicker.list" @confirm="changeAreaCode"></u-select>
	</view>
</template>

<script>
	import {sendSms,getImageCode,bindMobile,mustCaptcha} from "@/api/user.js"
	import {toast,goback,delay} from "@/utils/util.js"
	import {isValidPhone} from '@/utils/check.js'
	import {mapMutations} from 'vuex'
	import areaCodes from "@/utils/areaCodes.js"
	export default {
		data() {
			return {
				step: 0,
				areaCode:'86',
				areaPicker:{
					show:false,
					list:areaCodes.map(({name,code})=>({label:`${name} ﹢${code}`,value:code}))
				},
				
				phone:'',
				phoneStatus:{
					valid:false,
					error:false,
					des:''
				},
				imgStatus: {
					error: false,
					des: ''
				},
				
				maxlength: 4,
				verCode:'',
				verStatus:{
					second: 0,
					error:false,
					des:''
				},
				captcha:{ 
					token:'', 
					base64:'', 
					code:'' 
				}
			}
		},
		computed:{
			sendable(){
				return !!this.phone
			}
		},
		onLoad() {
			this.getCaptcha()
		},
		methods: {
			...mapMutations('user',['mixUserInfo']),
			async getCaptcha() {
				const {
					imageBase64,
					token
				} = await getImageCode();
				this.captcha.base64 = imageBase64
				this.captcha.token = token;
			},
			async checkPhone(){
				if(!this.phone){
					this.phoneStatus.error=true
					this.phoneStatus.des = '请输入手机号'
					this.phoneStatus.valid=false
					throw new Error('请输入手机号')
				}
				
				
				
				
				
				
				this.phoneStatus.error=false
				this.phoneStatus.des = ''
				this.phoneStatus.valid=true;
				return true;
			},
			async checkCaptcha() {
				if(!this.captcha.code){
					this.imgStatus.error = true;
					this.imgStatus.des = '请输入图形码'
					throw new Error('请输入图形码')
				}
				this.imgStatus.error = false;
				this.imgStatus.des = ''
				return true;
			},
			async sendSms() {
				await Promise.all([this.checkPhone(),this.checkCaptcha()])
				if(this.sendSms.lock){
					return
				}
				try{
					this.sendSms.lock = true
					const phone = await this.handlePhone()
					const mobile = `${this.areaCode=='86'?'':'+'+this.areaCode}${phone}` 
					const {time,status,message} = await sendSms({
						mobile:mobile,
						type:'bindMob',
						imgToken: this.captcha.token,
						imgCode: this.captcha.code,
					})
					if(!status){
						return toast(message||'发送失败')
					}
					this.verStatus.second = time;
					this.step=1;
					const timer = setInterval(()=>{
						if(this.verStatus.second==0){
							clearInterval(timer)
						}else{
							this.verStatus.second--
						}
					},1000)
				}finally{
					this.sendSms.lock = false
				}
			},
			async resend(){
				const must = await mustCaptcha({
					mobile:this.phone,
					type:'bindMob'
				})
				if(must){
					this.captcha.must = must
					this.getCaptcha()
					this.captcha.code = ''
				}
				this.step=0
			},
			
			change(value) {
				this.verCode = value;
			},
			
			async finish(value) {
				if(this.finish.lock){
					return
				}
				try{
					this.finish.lock = true
					const phone = await this.handlePhone()
					const mobile = `${this.areaCode=='86'?'':'+'+this.areaCode}${phone}` 
					
					await bindMobile({mobile:mobile,verCode:value})
					
					this.mixUserInfo({mobile:mobile})
					uni.showToast({
						title:"绑定成功"
					})
					await delay(1000)
					goback()
				}finally{
					this.finish.lock = false
				}
			},
			changeAreaCode([{value}]){
				this.areaCode = value
			},
			handlePhone(){
				return new Promise((resolve,reject)=>{
					var phone = this.phone;
					if (phone.charAt(0) === '0') {
						phone = phone.substring(1);
					}
					resolve(phone);
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	$text-color:#909399;
	$link-color:#ff9900;
	$error-color:#ff0000;
	.wrap {
		width: calc(750rpx * 2);
		display: flex;
		transition: all 0.3s linear;

		.page {
			width: 750rpx;
		}
	}

	.step1 {

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;
			.img-code {
				flex: 0;
				min-width: 140rpx;
				height: 70rpx;
				background-size: auto 100%;
				background-repeat: no-repeat;
			}
			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			.input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
				font-size: 40rpx;
			}

			.tips {
				color: $text-color;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
				font-size: 20rpx;
				&.error{
					color:$error-color
				}
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $text-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&.valid {
					color: rgb(255, 255, 255);
					background-color: rgb(255, 153, 0);
				}

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $text-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			margin-top: 500rpx;

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $text-color;

				.link {
					color: $link-color;
				}
			}
		}
	}

	.step2 {
		padding: 80rpx;
		.key-input {
			padding: 30rpx 0;
			text {
				display: none;
			}
			.error {
				display: block;
				color: red;
				font-size: 30rpx;
				margin: 20rpx 0;
			}
		}
		.title {
			font-size: 50rpx;
			color: #333;
		}
		.tips {
			font-size: 30rpx;
			color: #333;
			margin-top: 20rpx;
			margin-bottom: 60rpx;
		}
		.captcha {
			color: $link-color;
			font-size: 30rpx;
			margin-top: 40rpx;
			.noCaptcha {
				display: block;
			}
			.regain {
				display: block;
			}
		}
	}
	.step3{
		.content {
			width: 600rpx;
			margin: 80rpx auto 0;
		
			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}
		
			input {
				text-align: left;
				margin-bottom: 50rpx;
				padding-bottom: 6rpx;
			}
		
			.tips {
				color: $text-color;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
				&.error{
					color:$error-color
				}
			}
		
			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $text-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;
		
				&.valid {
					color: rgb(255, 255, 255);
					background-color: rgb(255, 153, 0);
				}
		
				&::after {
					border: none;
				}
			}
		}
	}
</style>
